<template>
	<el-drawer title="评论对话框" v-model="visible" :size="500" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main>
				<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
					<div v-html="diaryContent"></div>
					<div style="margin-top:20px;margin-bottom: 20px">
						<div v-for="item in commList" :key="item.commId">
							<div>
								<div style="width: 100%;">
									<el-avatar :src="item.avatar" size="small" style="margin-top: 5px;"></el-avatar>
									<span style="position: relative;margin-left: 15px;top: -10px;">{{ item.userName }}</span>
									<span style="float: right">
										<div>
											<el-icon style="margin-right: 10px;"><el-icon-clock/></el-icon>{{ item.createTime }}
										</div>
									</span>
								</div>
							</div>
							<div>
								{{item.content}}
							</div>
							<div style="margin-bottom:10px;text-align: right" v-if="item.isMe=='1'">
								<el-button type="text" @click="deleteComm(item.commId)">删除</el-button>
							</div>
						</div>
					</div>
					<el-form-item label="我的评论" prop="content">
						<el-input
							type="textarea"
							:autosize="{ minRows: 2, maxRows: 4}"
							placeholder="请输入内容"
							v-model="form.content">
						</el-input>
					</el-form-item>
					<div style="text-align: right">
						<el-button @click="visible=false">取 消</el-button>
						<el-button type="primary" :loading="isSaveing" @click="submit()">确 定</el-button>
					</div>
				</el-form>
			</el-main>
		</el-container>
	</el-drawer>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	components: {},
	data() {
		return {
			loading: false,
			form: {
				diaryId: "",
				content: "",
			},
			diaryContent: '',
			commList: [],
			visible: false,
			isSaveing: false,
			rules: {
				content: [
					{required: true, message: '评论内容不能为空', trigger: 'blur'}
				]
			}
		}
	},
	mounted() {

	},
	methods: {
		//显示
		open() {
			this.visible = true;
			return this;
		},
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = await this.$API.office.diary.insertDiaryComments.post(this.form);
					this.isSaveing = false;
					if (res.code == 200) {
						this.$emit('success')
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				}
			})
		},
		async deleteComm(commId)
		{
			var res = await this.$API.office.diary.deleteDiaryComments.post({commId: commId});
			if (res.code == 200) {
				let index = this.commList.findIndex(item => {
					if (item.commId == commId) {
						return true
					}
				})
				this.commList.splice(index, 1)
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getDiaryCommentsList(diaryId) {
			var res = await this.$API.office.diary.getDiaryCommentsList.get({diaryId: diaryId});
			if (res.code == 200) {
				this.commList = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		//表单注入数据
		setData(data) {
			console.log(data);
			this.form.diaryId = data.diaryId
			this.diaryContent = data.content
			this.getDiaryCommentsList(data.diaryId);
		},
	}
}
</script>

<style>
</style>
